import {
	PeripheralReg,
	PeripheralField,
	CmdPeripherals
} from "./structs.slint";
import { UiIo } from "global.slint";
import { TestData } from "test-data.slint";
import { HorizontalBox, LineEdit, Button, TextEdit, TabWidget, ListView, CheckBox } from "std-widgets.slint";

export component Peripherals inherits VerticalLayout {
	property <length> item_height: 20px;
	property <[PeripheralReg]> registers: [];
	property <[PeripheralField]> fields: [];
	property <string> selected_peripheral: "";
	property <string> selected_register: "";
	property <string> selected_field: "";
	property <brush> background: #d4dadf;

	HorizontalBox {
		horizontal-stretch: 0;
		LineEdit {
			read-only: true;
			placeholder-text: "Load SVD file";
			text: UiIo.svd_file_path;
		}
		Button {
			text: "Load SVD";
			clicked => { UiIo.probe-peripherals(CmdPeripherals.LoadSVD); }
		}
	}
	if (UiIo.peripherals.length == 0) : Rectangle {}
	if (UiIo.peripherals.length > 0) : HorizontalBox {
		ListView {
			width: 80px;
			for peripheral in UiIo.peripherals : Rectangle {
				height: root.item_height;
				background: (root.selected_peripheral == peripheral.name) ? root.background : white;
				HorizontalLayout {
					Text {
						vertical-alignment: center;
						text: peripheral.name;
						color: (root.selected_peripheral == peripheral.name) ? green : black;
					}
					Rectangle {
						width: 18px;
					}
				}
				TouchArea {
					clicked => {
						root.registers = peripheral.registers;
						root.fields = [];
						root.selected_peripheral = peripheral.name;
						root.selected_register = "";
						root.selected_field = "";
						UiIo.probe-peripheral-get(peripheral.name, "")
					}
				}
			}
		}
		if (root.registers.length == 0) : Rectangle {
			min-width: 200px;
		}
		if (root.registers.length > 0) : ListView {
			width: 200px;
			for register in root.registers : Rectangle {
				height: root.item_height;
				background: (root.selected_register == register.name) ? root.background : white;
				HorizontalLayout {
					Text {
						width: 100px;
						vertical-alignment: center;
						text: register.name;
						color: (root.selected_register == register.name) ? green : black;
					}
					Text {
						width: 800px;
						vertical-alignment: center;
						horizontal-alignment: left;
						text: register.value;
						color: (root.selected_register == register.name) ? green : black;
					}
					Rectangle { }
				}
				TouchArea {
					clicked => {
						root.fields = register.fields;
						root.selected_register = register.name;
						root.selected_field = "";
						UiIo.probe-peripheral-get(root.selected_peripheral, register.name)
					}
				}
			}
		}
		
		if (root.fields.length == 0) :Rectangle {
			min-width: 180px;
		}
		if (root.fields.length > 0) : HorizontalLayout {
			ListView {
				width: 180px;
				for field in root.fields : Rectangle {
					height: root.item_height;
					background: (root.selected_field == field.name) ? root.background : whitesmoke;
					TouchArea {
						clicked => {
							root.selected_field = field.name;
						}
					}
					
					HorizontalLayout {
						Text {
							width: 80px;
							vertical-alignment: center;
							horizontal-alignment: right;
							text: field.name + ": ";
							//color: (root.selected_field == field.name) ? red : black;
						}
						if (field.bit_width == 1) : CheckBox {
							width: 120px;
							checked: field.value != "0";
							property <string> next;
							toggled => {
								next = self.checked ? "set": "clear";
								UiIo.probe-peripheral-modify(next, root.selected_peripheral,
																root.selected_register, field.bit_offset, 1)
							}
						}
						
						if (field.bit_width != 1) : LineEdit {
							text: field.value;
							width: 120px;
							accepted => {
								UiIo.probe-peripheral-modify(self.text, root.selected_peripheral,
														root.selected_register, field.bit_offset, field.bit-width)
							}
						}
					}
					//background: (root.selected_field == field.name) ? root.background : white;
				}
			}
			Rectangle {}
		}
	}
}

